<template>
  <el-dialog
      v-model="dialogVisible"
      title="新增"
      width="550"
      :close-on-click-modal="false"
  >

    <el-scrollbar height="500px">
      <el-form label-width="80px" :model="dataForm" :rules="rules" ref="planRef">
        <el-form-item label="科室部门" prop="deptSubId">
          <!--
             v-model="value"
            :options="options"
            :props="props"
            @change="handleChange"
          -->
          <el-cascader
              style="width:60%;"
              :options="options"
              :props="{
                value:'subId',
                label:'subName'
              }"
              v-model="dataForm.deptSubId"
              @change="handleChange"
          />
        </el-form-item>

        <el-form-item label="出诊医生" prop="doctorId">
          <el-select   style="width: 50%" v-model="dataForm.doctorId">
            <el-option
                v-for="item in DoctorOptions"
                :key="item.id"
                :value="item.id"
                :label="item.name"
            >

            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="出诊日期">
          <!--
            editable  是否可以在日期选择器中修改内容
            -->
          <el-date-picker
              type="date"
              placeholder="请选择日期"
              style="width: 100%"
              v-model="dataForm.date"
              value-format="YYYY-MM-DD"
              :clearable="false"
              :editable="false"

          />
        </el-form-item>

        <el-form-item label="出诊时间">
          <div  style="width: 100%">
            <el-checkbox v-model="checkAll" @change="checkAllChange" label="全选"  />
          </div>
          <div  style="width: 100%">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                  v-for="(item,index) in slotList"
                  :key="index"
                  :label="item"
              />
            </el-checkbox-group>
          </div>
        </el-form-item>

        <el-form-item label="时段人数">
          <!-- show-input： 带输入框的滑块 -->
          <!-- min  最小值 -->
          <!-- max  最大值 -->
          <el-slider :min="1" :max="10" v-model="dataForm.slotMaximum" show-input />
        </el-form-item>

      </el-form>
    </el-scrollbar>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="insertPlan">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, reactive,onMounted} from "vue";
import {selectDeptAndSub} from "@/api/dept/index.js";
import {deptSubDoctor} from "@/api/care"
import {insertDoctorPlan} from "@/api/visit"
import dayjs from "dayjs";
import {ElMessage} from "element-plus";

// 默认值是false  默认隐藏
let dialogVisible = ref(false)

// 导出子组件的 dialogVisible 让父组件能够控制
defineExpose({dialogVisible})

const dataForm = ref({
  "deptSubId": '',
  "doctorId": '',
  "date": dayjs().format("YYYY-MM-DD"),         // 出诊日期
  "totalMaximum": 0,  // 出诊人数最大限制   (时段人数 * 出诊时段)
  "slotMaximum": 3,   // 时段人数
  "slots": []          // 出诊时段   --  时间段对应的 数值

})

let slotList = [
  '08:00~08:30',  // 1
  '08:30~09:00',
  '09:00~09:30',
  '09:30~10:00',
  '10:00~10:30',
  '10:30~11:00',
  '11:00~11:30',
  '11:30~12:00',
  '13:00~13:30',
  '13:30~14:00',
  '14:00~14:30',
  '14:30~15:00',
  '15:00~15:30',
  '16:00~16:30',
  '16:30~17:00',
]
 // 新增校验规则
let rules = reactive({
  deptSubId: [
    {required: true, message: '请选择科室部门'}
  ],
  doctorId:[
    {required:true ,message:'请选择出诊医生'}
  ]
})

// el-form 组件的实例化对象
let planRef = ref();

let emit = defineEmits(['queryPlan'])

// 添加计划
const insertPlan = async() => {
  if (!planRef.value) return
  await planRef.value.validate(async (valid, fields) => {
    if (valid) {
      // 出诊时间段校验
      if (checkList.value.length == 0) {
        ElMessage({
          type: 'warning',
          message: '出诊时间段没有选择',
        });
        return
      }
      // 调整传参的 dataForm 对象
            // 每次点击确定时 将dataForm表单中的 slots 置为空
      dataForm.value.slots = [];

      for (let one of checkList.value) {
        let index = slotList.indexOf(one) + 1;
        dataForm.value.slots.push(index);
      }

      // 表单对象当作参数时的格式处理
      dataForm.value.totalMaximum = dataForm.value.slotMaximum * dataForm.value.slots.length;
      dataForm.value.deptSubId = dataForm.value.deptSubId[1];
      // console.log(dataForm.value.slots)
      // 调用添加接口

      let res = await insertDoctorPlan(dataForm.value);
      console.log(res);
      // 关闭对话框
      // 调用一下父组件中的查询方法
      // 给个提示消息
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '添加成功',
        });
        // 关闭 form 表单
        dialogVisible.value = false;
        // 调用父组件查询方法
        emit('queryPlan');
        // 清空表单
        resetForm()
      } else {
        ElMessage({
          type: 'warning',
          message:'添加失败'
        })
      }
    } else {
      console.log('校验失败', fields)
    }
  })
};

// 清空表单
const resetForm = () => {
  if (!planRef.value) return
  planRef.value.resetFields()  //重置该表单项，将其值重置为初始值，并移除校验结果
  checkAll.value = false // 全选框 选中状态默认为false
  checkList.value = [] // 复选框组默认未选中
  //   重置表单时  表单中由 prop 属性的会自己重置 没有 prop 属性的需要手动重置
  dataForm.value.slotMaximum = 3;    // 时段人数默认3人
  dataForm.value.date = dayjs().format('YYYY-MM-DD'); // 出诊日期默认当前默认系统时间
};



// 医生选中的出诊时间数组    复选框  一组使用时  绑定的内容值是 以数组的形式收集所有选中的复选框的值
let checkList = ref([])
// 出诊时间全选反选 复选框  单独使用时    绑定的内容值是   选中为true 不选中为false
let checkAll = ref(false);

const checkAllChange = ()=>{
  if (!checkAll.value) {
    checkList.value = [];
  } else {
    checkList.value = slotList;
  }
}




// 用来渲染科室部门级联选择器的数据
let options=ref([])

// 获取所有科室门诊数据
const getDeptAndSub = async () => {
  let res = await selectDeptAndSub();
  console.log(res)   // 查看服务端获取的科室和部门的数据
  // 获取返回数据对象中的所有属性
  // Object.keys 会把对象中所有的属性 以数据的形式返回
  let attArr = Object.keys(res.result);
  // console.log(attArr)  // 打印所有的属性
  // 通过数组 map 方法 改造数据格式
  options = attArr.map((item,index)=>{
    return{
      subId:item, // item 数据对象中的 key 值    我觉得这个时index
      subName:item,
      children:res.result[item]
    }
  })
  // console.log(options)
};
// 遍历门诊医生下拉菜单的数据
let DoctorOptions = ref([]);


// 科室门诊变化后重新查询门诊下的信息
const handleChange = async () => {
  // console.log(dataForm.value.deptSubId[1]);

  let data = {
    deptSubId: dataForm.value.deptSubId[1]
  }

  let res = await deptSubDoctor(data);
  // console.log(res);
  DoctorOptions.value = res.result
  // console.log(DoctorOptions);

  // 清空医生下拉菜单
  dataForm.value.doctorId = '';

};

onMounted(()=>{
  getDeptAndSub()
})


</script>
<style scoped>

</style>